<template>
  <div ref="chartComp" style="width:100%; height:100%"></div>
</template>

<script>
import * as echarts from "echarts";

const echart = {
  name: "echart",
  props: {
    // 数据
    option: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      echartCase: null // 组件id
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      // 将实例初始化后赋值给图表
      this.echartCase = echarts.init(this.$refs.chartComp);
      // 赋值图表数据
      this.echartCase.setOption(this.option);
      // 添加窗口改变监听
      window.onresize = () => {
        this.echartCase.resize();
      };
    }
  }
};
/* 注册组件的方法 */
echart.install = Vue => {
  Vue.component(echart.name, echart);
};
export default echart;
</script>

<style lang="scss" scoped>
</style>